<template>
  <div class="app-container">
    <div class="search-bar">
      <search-bar :search="searchParams" @on-search="search">
        <el-form :model="searchParams" inline class="search-form-inline">
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户名称" label-width="70px">
                <el-input
                  v-model="searchParams.customerName"
                  clearable
                  placeholder="客户名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号码" label-width="70px">
                <el-input
                  v-model="searchParams.mobilephone"
                  clearable
                  placeholder="手机号码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="来源渠道" label-width="70px">
                <el-select
                  v-model="searchParams.channel"
                  placeholder="来源渠道"
                  clearable
                >
                  <el-option
                    v-for="item in customerChannels"
                    :key="item.bizValue"
                    :label="item.bizName"
                    :value="item.bizValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>
    </div>
    <div class="tb-main">
      <Table-header @create="handleCreate"  />
      <page-table
        :ref="id"
        :WP_TableId="id"
        :WP_MaxHeight="370"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        :WP_Loading="loading"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column
          fixed
          show-overflow-tooltip
          width="150"
          prop="customerName"
          label="客户名称"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="showCustomerDetail(scope.row)">{{
              scope.row.customerName
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
width="120" prop="level" label="客户级别">
        <template slot-scope="scope">
            <el-tag  class="wp-tag--dark" :color="formatterLevelColor(scope.row.level)">{{formatterLevel(scope.row.level)}}</el-tag>
        </template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="channel"
          label="来源渠道"
          :formatter="formatterChannel"
        ></el-table-column>
        <el-table-column
          width="130"
          prop="mobile"
          label="手机号码"
        ></el-table-column>
                <el-table-column
          label="所属省份"
          prop="province"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          width="200"
          prop="address"
          show-overflow-tooltip
          label="客户地址"
        >
        </el-table-column>
        <el-table-column
          width="100"
          prop="chargePersonName"
          label="负责人"
        ></el-table-column>
        <el-table-column
          width="100"
          prop="creatorName"
          label="创建人"
        ></el-table-column>
        <el-table-column
          width="160"
          prop="updateTime"
          label="更新时间"
        ></el-table-column>
        <el-table-column
          width="160"
          prop="createTime"
          label="创建时间"
        ></el-table-column>
      </page-table>
    </div>
    <Create-panel :title="titleCreate" :show.sync="showCreate" :height='400'></Create-panel>
    <Detail-panel :param="rowInfo" :show.sync="showDetail"></Detail-panel>
  </div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import TableHeader from './components/TableHeader'
import DetailPanel from './components/DetailPanel'
import CreatePanel from './components/CreatePanel'
import Mixins from './mixins'
export default {
  name: 'customer',
  components: { SearchBar, TableHeader, PageTable, DetailPanel, CreatePanel },
  mixins: [Mixins],
  data () {
    return {
      id: 'customer',
      showCreate: false,
      showDetail: false,
      titleCreate: '',
      rowInfo: {}
    }
  },
  methods: {
    handleCreate (text) {
      this.titleCreate = text
      this.showCreate = true
    },
    showCustomerDetail (row) {
      this.rowInfo = {...row}
      this.showDetail = true
    }
  }
}
</script>
<style lang="scss" scoped>
.wp-tag--dark{
  color: #fff;
}
</style>

